<template>
  <div>
    <el-dialog
      :title="!currentRow.cat_id? '添加': '编辑'"
      :visible="dialogVisible"
      width="30%"
      @close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="form.cat_name" />
        </el-form-item>
        <el-form-item v-if="!currentRow.cat_id" label="父级分类">
          <el-cascader
            v-model="value"
            :options="options"
            :props="{
              checkStrictly: true,
              value: 'cat_id',
              label:'cat_name'
            }"
            @change="handleChange"
          >
            <template slot-scope="{ node, data }">
              <span>{{ data.cat_name }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.cat_name }}) </span>
            </template>
          </el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:dialogVisible',false)">取 消</el-button>
        <el-button type="primary" @click="clickDetailed">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getGoodsCategories, putGoodsCategories, putGoodsJointLevel } from '@/api/Taxonomies.js'

export default {
  name: 'CodityPopup',
  props: {
    // 弹窗框
    dialogVisible: {
      type: Boolean,
      required: true
    },
    // 编辑所用到的数据
    currentRow: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      value: '',
      form: {
        cat_pid: 0,
        cat_name: '',
        cat_level: 0
      },
      // 表单验证
      rules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ]
      },
      // 储存练级选择器数据
      options: [],
      // 获取选择器层级
      ionLevel: 2
    }
  },

  created() {
    this.enterAssignment()
  },

  methods: {
    // 定义退出
    handleClose() {
      this.$refs.form.resetFields()
      this.from = {
        cat_pid: 0,
        cat_name: '',
        cat_level: 0
      }
      this.$emit('update:dialogVisible', false)
    },
    // 进入页面赋值
    async enterAssignment() {
      this.form = { ...this.currentRow }
      const res = await getGoodsCategories({ type: this.ionLevel })
      this.options = res
      console.log(res)
    },
    // 确定
    async clickDetailed() {
      this.$refs.form.validate()
      try {
        if (this.value.length !== 0) {
          const res = await putGoodsJointLevel(this.form)
          console.log(res)
          this.$message.success('发布成功')
        } else {
          this.form.id = this.currentRow.cat_id
          await putGoodsCategories(this.form)
          this.$message.success('修改成功')
        }
        this.$emit('update:dialogVisible', false)
        this.$emit('delClick')
      } catch (err) {
        this.$message.error('网络错误,上传失败')
      }
    },
    // 练级选择器
    handleChange(value) {
      // console.log(this.form.cat_name)
      // console.log(this.value.length - 1)
      if (value.length > 1) {
        this.form.cat_pid = value[value.length - 1]
        this.form.cat_level = value.length
        // console.log(value)
      } else {
        // debugger
        this.form.cat_pid = value
        this.form.cat_level = 0
      }
      console.log(this.form)
    }
  }
}
</script>

<style scoped lang='less'>

</style>
